<template>
  <div id="cart">
    <nav-bar>
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
      <template #center> 购物车({{ cartList.length }})</template>
      <template #right> <span @click="deletecart">删除</span> </template>
    </nav-bar>
    <my-content>
      <user-filter :currentUser="currentUser">
        <div class="cart" v-if="cartList.length">
          <van-checkbox-group ref="checkboxGroup" v-model="checkedList">
            <van-checkbox
              :name="item.goodsId"
              v-for="item in cartList"
              :key="item.goodsId"
              checked-color="rgb(238, 10, 36)"
            >
              <van-card
                :num="item.num"
                :price="item.sellingPrice"
                :desc="item.goodsIntro"
                :title="item.goodsName"
                :thumb="item.goodsCoverImg"
              >
                <template #footer>
                  <div class="cartnum">
                    <van-button
                      icon="minus"
                      size="small"
                      @click.stop="item.num--"
                      :disabled="item.num === 1"
                    ></van-button>
                    <span>{{ item.num }}</span>
                    <van-button
                      icon="plus"
                      size="small"
                      @click.stop="item.num++"
                    ></van-button>
                  </div>
                </template>
              </van-card>
            </van-checkbox>
          </van-checkbox-group>
          <my-submit-bar
            @submitorder="submitorder"
            @checkall="checkall"
            :checked="checked"
            :totalprice="totalprice"
          ></my-submit-bar>
        </div>
        <div class="cartempty" v-else>
          <img src="@/assets/img/cart/empty-car.png" />
        </div>
      </user-filter>
    </my-content>
  </div>
</template>

<script>
import MyContent from "@/components/common/content/Content.vue";
import NavBar from "@/components/common/navbar/NavBar.vue";
import MySubmitBar from "@/components/common/cart/MySubmitBar.vue";
import UserFilter from "@/components/content/filter/UserFilter.vue";
export default {
  name: "Cart",
  data() {
    return {
      checkedList: [],
      checked: false,
      currentUser: {},
    };
  },
  created() {
    let currentUser = JSON.parse(sessionStorage.getItem("currentUser"));
    if (currentUser) {
      this.currentUser = currentUser;
    } else {
      this.currentUser = {};
    }
  },
  computed: {
    totalprice() {
      return (
        this.checkedList.reduce((accumulator, item) => {
          let arr = this.cartList.filter((item2) => item2.goodsId === item)[0];

          if (arr) return arr.sellingPrice * arr.num + accumulator;
          else return 0;
        }, 0) * 100
      );
    },
    cartList() {
      if (this.currentUser.cartList) return this.currentUser.cartList;
      else return [];
    },
  },
  methods: {
    deletecart() {
      this.checkedList.map((id) => {
        let cartList = this.currentUser.cartList;
        for (let i = 0; i < cartList.length; i++) {
          if (cartList[i].goodsId === id) {
            this.currentUser.cartList.splice(i, 1);
            break;
          }
        }
      });
      // this.$store.commit("deleteCart", goodsIdList);
      sessionStorage.setItem("currentUser", JSON.stringify(this.currentUser));
    },
    checkall(checked) {
      if (checked) {
        this.$refs.checkboxGroup.toggleAll(true);
        this.checked = true;
      } else {
        this.$refs.checkboxGroup.toggleAll();
        this.checked = false;
      }
    },
    submitorder() {
      this.deletecart();
      alert("提交成功！");
    },
  },
  components: {
    MyContent,
    NavBar,
    MySubmitBar,
    UserFilter,
  },
};
</script>

<style scoped>
#cart {
  overflow: hidden;
}
.cart .van-card {
  padding: 8px 0px;
  width: 80%;
}
.van-checkbox {
  margin-left: 12px;
}
.van-button {
  z-index: 2;
}
.cartnum span {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 6px;
}
.cartempty {
  text-align: center;
  height: 100%;
}
.cartempty img {
  width: 70%;
  margin: 20% 0;
}
</style>
